<template>
  <erp-form-popover
    :title="title"
    :field="field"
    :value="value"
    :props="props"
    :extra="extraCom"
    :options="computedOptions"
    :form="form"
    @value-change="handleValueChange"
    @update-id-field="handleUpdateField"
    @multiple-insert="handleMultipleInsert"
  />
</template>

<script>
import ErpFormPopover from './ErpFormPopover';
import {base as request} from '@/request';
/**
 * 销售发货单选择销售单
 * @author maolin
 */
export default {
  name: "ErpFormSelOrderSendSell",
  components: {
    ErpFormPopover
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      type: [String, Number],
      default: ''
    },
    /**
     * 属性，暂未使用
     * @public
     */
    props: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 额外配置
     * ```js
     * return {
        // // 表单需要的id字段
        // idField: '',
        // inputPlaceholder: '',
        // modalTitle: '',
        // modalWidth: null,
        // modalHeight: null,
        // // 模态框表格中name对应的字段名
        // modalNameField: null,
        // // 模态框表格中id对应的字段名
        // modalIdField: null,
        // // 是否转换为字符串
        // needToString: false,
        // // 关联额外字段，除了id和name之外还需要关联字段时
        // 物料类型id
        // materialTypeId: null,
        // 客户id
        // customerId: null,
        // extraData: [
        //     // {
        //     //     // 外部id
        //     //     field: "userId",
        //     //     // 内部id
        //     //     relatedField: "id",
        //     // }
        // ],
        "needToString": false,
        "idField": "",
        "readonly": true,
        "modalIdField": "id",
        "modalNameField": "name",
        "modalWidth": "80%",
        "modalHeight": "80%",
      }
     * ```
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
    };
  },
  computed: {
    materialType () {
      return this.extra && this.extra.materialType ? this.extra.materialType : null;
    },
    extraCom () {
      const defaultConfig = {
        // // 表单需要的id字段
        // idField: '',
        // inputPlaceholder: '',
        // modalTitle: '',
        // modalWidth: null,
        // modalHeight: null,
        // // 模态框表格中name对应的字段名
        // modalNameField: null,
        // // 模态框表格中id对应的字段名
        // modalIdField: null,
        // // 是否转换为字符串
        // needToString: false,
        // // 关联额外字段，除了id和name之外还需要关联字段时
        // 物料类型id
        // materialTypeId: null,
        // 客户id
        // customerId: null,
        // extraData: [
        //     // {
        //     //     // 外部id
        //     //     field: "userId",
        //     //     // 内部id
        //     //     relatedField: "id",
        //     // }
        // ],
        "needToString": false,
        "idField": "",
        "readonly": true,
        "modalIdField": "id",
        "modalNameField": "name",
        "modalWidth": "80%",
        "modalHeight": "80%",
      };
      return Object.assign(defaultConfig, this.extra);
    },
    computedOptions () {
      let materialType = this.extraCom ? this.extraCom.materialTypeId : null;
      let customerId = this.extraCom ? this.extraCom.customerId : null;
      return {
        "type": "multipleSelect",
        "title": "所属订单",
        "table": {
          "props": {
            "resizable": true
          },
          "permissions": ["selOrderSendBack:selOrderSendMaterialList"],
          "rowKey": "id",
          "list": [],
          "fields": [
            {"label": "销售单明细编号", "width": "120", "fixed": null, "prop": "itemOrderNo"},
            {"label": "物料编码", "width": "100", "fixed": null, "prop": "code"},
            {"label": "物料名称", "width": "100", "fixed": null, "prop": "name", "template": "{{item.name}}{{item.specs}}"},
            {"label": "物料形态", "width": "100", "fixed": null, "prop": "materialShape","showTextProp": "materialShapeShowText"},
            {"label": "颜色", "width": "100", "fixed": null, "prop": "ourColor"},
            {"label": "色号", "width": "100", "fixed": null, "prop": "ourColorCode"},
            {"label": "销售数量", "width": "100", "fixed": null, "prop": "sellNum", "align": "right", "template": "{{item.sellNum ? (item.sellNum).toFixed(2) : 0}}({{item.sellUnitShowText}})"},
            {"label": "可发货数量", "width": "100", "fixed": null, "prop": "surplusSellNum", "align": "right", "template": "{{item.surplusSellNum ? (item.surplusSellNum).toFixed(2) : 0}}({{item.sellUnitShowText}})"},
            {"label": "入库数量", "width": "100", "fixed": null, "prop": "mainNum", "align": "right", "template": "{{item.mainNum ? (item.mainNum).toFixed(2) : 0}}({{item.mainUnitShowText}})"},
            {"label": "已发货数量", "width": "100", "fixed": null, "prop": "sendNum", "align": "right", "template": "{{item.sendNum ? (item.sendNum).toFixed(2) : 0}}({{item.mainUnitShowText}})"},
            {"label": "剩余发货数量", "width": "100", "fixed": null, "prop": "surplus", "align": "right", "template": "{{item.surplus ? (item.surplus).toFixed(2) : 0}}({{item.mainUnitShowText}})"},
            {"label": "备注", "minWidth": "100", "fixed": null, "prop": "remark"},
          ],
          "border": false,
          "showPagination": true,
          "showOrderNumber": false,
          "selectable": true,
          "defaultExpandAll": true,
          "showExport": false,
          "customColumn": false,
          "operationWidth": "100"
        },
        "search": {
          "form": {
            "materialType": materialType,
            "bizUserId": customerId,
            "pageOrderBy": null,
            "pageOrderDir": null,
            "pageIndex": 1,
            "pageSize": 30
          },
          "showKeywordQuery": true,
          "keywordKey": "itemOrderNo",
          "headSearchPlaceholder": "所属订单",
          "showAdvancedQuery": false,
        },
        "apiList": {
          "list": "/selOrderSendBack/selOrderSendMaterialList"
        },
        "components": {},
        "buttons": []
      };
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 监听值变化
     * @private
     * @param value
     */
    handleValueChange (value) {
      this.$emit('value-change', value);
    },
    /**
     * 监听表单其他值更新
     * @private
     * @param {object} obj 其他值对象{表单字段1：表单值1，表单字段2： 表单值2}
     */
    handleUpdateField (obj) {
      this.$emit('update-id-field', obj);
    },
    /**
     * 单选数据
     * @param {object} data 当前选中行
     * @public
     */
    handleMultipleInsert (data) {
      this.$emit('multiple-insert', data);
    }
  },
};
</script>

<style lang="scss" scoped>

</style>
